<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function checked(){
	var na=fotna.name.value;
	var pa=fotna.pass.value;
	var co=fotna.code.value;
	if(na==''){
		alert("账号不能为空！");
		return false;
	}else if(co==''){
		alert("验证码不能为空！");
		return false;
	}else if(pa==''){
		alert("密码不能为空！");
		return false;
	}else if(pa=='' && na=='' && co==''){
		alert("账号密码不能为空！");
		return false;
	}
}
function changcode() {
	document.getElementById("veryCode").src = document
			.getElementById("veryCode").src
			+ "?time=" + new Date().getTime();
}
</script>
<style>
        html{
            font-family: sans-serif;
            line-height: 1.15;
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
            -ms-overflow-style: scrollbar;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
        }
        body{
            margin: 0;
            color: rgba(0,0,0,.65);
            font-size: 14px;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif;
            font-variant: tabular-nums;
            line-height: 1.5;
            background-color: #fff;
            font-feature-settings: "tnum";
        }
        #log{
            background-image: url("../images/demo2.png");
            min-width: 1200px;
            height: 100%;
            min-height: 721px;
            background-size: cover;
            background-repeat: no-repeat;
            position: relative;
        }
        .main-body{
            width: 950px;
            height: 600px;
            top: 50%;
            left: 50%;
            position: absolute;
            -webkit-transform: translate(-50%,-50%);
            -moz-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
            -o-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
            overflow: hidden;
            box-shadow: 0 0 15px rgb(0 138 233/15%);

        }
        .qr-code{
            float: left;
            width: 260px;
            height: 600px;
            border-radius: 10px 0 0 10px;
            background: url("../images/login-site-bg.png") center center no-repeat;
            position: relative;
            padding: 0 60px;
        }
        .qr-code .login-title{
            font-size: 28px;
            color: #fff;
            letter-spacing: 9px;
            margin: 150px 0 80px 0;
        }
        .new-login{
            width: 450px;
            height: 500px;
            padding: 50px 60px;
            background-color: #fff;
            position: relative;
            float: left;
            border-radius: 0px 10px 10px 0px;
            background-color: white;
        }
        #dr{
            color: #1890ff;
            font-weight: 500;
            font-size: 24px;
        }
        #aun{
            width: 152px;
            height: 32px;
            padding: 20px 16px;
            border-bottom: 2px solid #1890ff;
        }
        #xian{
            position:relative;
            width: 420px;
            height: 73px;
            border-bottom: 1px solid #E8E8E8;
            margin-bottom: 32px;
        }
        #zhanghao{
            width: 419px;
            height: 53px;
            position: relative;
            margin-top: 32px;
            border-radius: 5px 5px 5px 5px;
        }
        
         #zhanghao2{
            width: 100px;
            height: 53px;
            position: relative;
            margin-top: 32px;
            border-radius: 5px 5px 5px 5px;
        }
        
        #mima{
            width: 419px;
            height: 53px;
            border-radius: 5px 5px 5px 5px;
            margin-top: 32px;
        }

        #zhagw{
            margin-top: 32px;
            font-size: 14px;
            width: 419px;
            height: 40px;
        }

        #iconqiye{
            width: 18px;
            height: 18px;
            display: inline-block;
            vertical-align: -4px;
            overflow: hidden;
            fill: currentColor;
            color: #d2cfcf;
        }

        #iconzhanghaoanquan{
            width: 18px;
            height: 18px;
            display: inline-block;
            vertical-align: -4px;
            overflow: hidden;
            fill: currentColor;
            color: #d2cfcf;
        }

        #fz{
            position: absolute;
            margin-top: 15px;
            margin-left: 20px;
        }
        #suo{
            position: absolute;
            margin-top: 15px;
            margin-left: 20px;
        }

        #yx{
            width: 362px;
            height: 42px;
            padding: 5.5px 10px 5px 46px;
            font-size: 15px;
            text-align: inherit;
            border: 1px solid #d9d9d9;
            border-radius: 5px 5px 5px 5px;
        }
        
        #yzm{
        float: left;
         width: 200px;
         height: 42px;
         padding: 5.5px 10px 5px 46px;
          font-size: 15px;
          border: 1px solid #d9d9d9;
            border-radius: 5px 5px 5px 5px;
        }
        
        #yzm:hover{
            border-color: #40a9ff;
        }
        #yzm:focus{
            border-color: #80bdff;
            outline:0;
        }
        
        #yx:hover{
            border-color: #40a9ff;
        }
        #yx:focus{
            border-color: #80bdff;
            outline:0;
        }
        #zm{
         float: left;
         width: 200px;
            height: 42px;
        }
        #m2{
            width: 362px;
            height: 42px;
            padding: 5.5px 10px 5px 46px;
            font-size: 15px;
            text-align: inherit;
            border: 1px solid #d9d9d9;
            border-radius: 5px 5px 5px 5px;
        }
        #m2:hover{
            border-color: #40a9ff;
        }
        #m2:focus{
            border-color: #80bdff;
            outline:0;
        }
        #qsr{
            font-size: 12px;
            float: right;
            position: relative;
            top: 2px;
            display: none;
            color: #F5222D;
        }
        #dlu{
            text-decoration: none;
            color: #1890ff;
        }
        #iconzhengyan_huaban1{
            width: 18px;
            height: 18px;
            display: inline-block;
            vertical-align: -4px;
            overflow: hidden;
            fill: currentColor;
            color: #d2cfcf;
        }
        #mmcw{
            font-size: 12px;
            float: right;
            position: relative;
            top: 2px;
            display: none;
            color: #F5222D;
        }
        #wjmm{
            float: right;
        }
        #wjmm a{
            text-decoration: none;
            color: #999999;
        }
        #wjmm a:hover{
            color: #40a9ff;
            text-decoration: underline;
        }
        #dag{
            height: 20px;
            width: 20px;
        }
        #dagk{
            height: 15px;
            width: 15px;
        }
        #dag{
            top:10px;
        }
        #ac{
            width: 10px;
            height: 15px;
            position: absolute;
            float: left;
            margin-left: 20px;
        }
        #zhou{
            margin-left: 48px;
            color: #000000A6;
        }
        #dla{
            background-color: #34acff;
            width: 100%;
            height: 50px;
            color: #fff;
            font-size: 20px;
            margin-top: 10px;
            border-radius: 5px 5px 5px 5px;
            border-color: #34acff;
            cursor: pointer;
        }
       
        #yzmd{
         position: absolute;
        margin-left:268px;
        float: left;
        height:42px;
        width:100px
        }
    </style>
</head>
<body>
<div id="log">
    <div class="main-body">
        <div class="qr-code">
            <div class="login-title">
                欢迎进入<br>易买网后台管理
            </div>
        </div>
        <div class="new-login">
            <div id="xian">
                <div id="aun">
                    <span id="dr"><a href="javascript:;" id="dlu">账号密码登录</a></span>
                </div>
            </div>
          <form onsubmit="return checked()" name="fotna" method="post" action="/Ebuy/LoginServlet/logMan"> 
              <div id="zhanghao">
                <span id="fz"><svg id="iconqiye" viewBox="0 0 1024 1024">
                    <path d="M991.154 442.976L602.927 38.893C578.804 13.806 546.557 0 511.996 0s-66.81 13.804-90.929 38.893L32.841 442.976c-40.061 41.71-34.904 77.76-28.281 92.817 4.721 10.685 20.656 40.054 66.559 40.054h56.904V886.7c0 70.576 50.683 137.027 122.71 137.027H416.003v-73.042l0.002-255.935c0-35.267-5.343-54.92 30.686-54.92h130.614c36.031 0 30.686 19.654 30.686 54.92v328.981H773.26c72.029 0 122.715-66.45 122.715-137.027V575.849h56.9c45.905 0 61.843-29.369 66.561-40.054 6.62-15.059 11.778-51.11-28.281-92.819z"></path>
                </svg></span>
                  <input type="text" name="name" placeholder="请输入账号" id="yx" />
              </div>
              <div id="qsr"></div>
              <div id="mima">
                <span id="suo"><svg id="iconzhanghaoanquan" viewBox="0 0 1024 1024">
                    <path d="M845.552 430.624h-71.848V262.816C773.704 122.288 659.968 8 520.04 8c-139.944 0-253.8 114.288-253.8 254.832v167.8h-71.784c-34.616 0-62.672 28.16-62.672 62.928V953c0 34.824 28.064 63.008 62.672 63.008h651.16c34.616 0 62.6-28.184 62.6-63.008V493.56c0-34.776-28.048-62.936-62.664-62.936zM555.216 735.248v100.32a8.28 8.28 0 0 1-8.208 8.264h-53.88a8.32 8.32 0 0 1-8.272-8.256V735.248c-25.312-13-42.84-39.056-42.84-69.592 0-43.208 34.928-78.36 77.968-78.36 43.096 0 78.04 35.144 78.04 78.344 0.048 30.552-17.48 56.608-42.808 69.608z m121.128-304.624h-312.64V266.976c0-86.56 70.208-157.056 156.392-157.056s156.256 70.496 156.256 157.056v163.648h-0.008z m0 0"></path>
                </svg></span>
                  <input type="password" name="pass" placeholder="请输入密码" id="m2"/>
              </div>
               <div id="zhanghao2">
                <span id="fz"><svg id="iconqiye" viewBox="0 0 1024 1024">
                    <path d="M517.094527 1024c-153.345274 0-438.129353-228.234826-438.129353-444.242786V167.60995c0-10.189055 8.151244-17.830846 18.849751-18.340298l24.963184-0.509453c1.018905 0 98.324378-2.037811 198.686568-41.775124C423.864677 66.228856 490.093532 19.359204 491.112438 18.849751l14.774129-10.189054c3.056716-2.037811 7.132338-3.566169 11.20796-3.56617 4.075622 0 8.151244 1.018905 11.207961 3.56617l14.774129 10.698507c0.509453 0.509453 67.247761 47.379104 170.157214 88.135323 100.362189 39.737313 197.667662 41.775124 198.686567 41.775125l24.453731 0.509452c10.189055 0 18.849751 8.151244 18.849752 18.340299v412.147264c0 215.498507-284.78408 443.733333-438.129354 443.733333z m370.881592-808.501493c-37.699502-3.056716-117.174129-12.736318-199.196019-45.341293-84.569154-33.114428-146.212935-70.304478-171.685573-87.116418-25.472637 16.302488-87.116418 54.00199-171.685572 87.116418-82.021891 32.604975-160.987065 42.284577-199.19602 45.341293v364.258707c0 169.138308 248.103483 376.485572 370.881592 376.485572 47.379104 0 140.099502-38.718408 230.78209-123.287562 87.625871-81.512438 140.099502-176.270647 140.099502-253.19801V215.498507z m-406.03383 433.544279c-6.113433 6.622886-14.774129 10.189055-23.944279 10.189055-9.170149 0-17.321393-3.566169-23.944279-10.189055l-101.381094-101.890547a33.827662 33.827662 0 0 1 0-47.888557c13.245771-13.245771 34.133333-13.245771 47.379104-0.509453l0.509453 0.509453 77.436816 77.946268 195.120398-196.648756c12.736318-13.245771 34.133333-13.245771 47.379104-0.509453l0.509453 0.509453c13.245771 13.245771 13.245771 34.642786 0 47.888557l-219.064676 220.593035z"></path>
                </svg></span>
                  <input type="text" name="code" placeholder="请输入验证码" id="yzm" />
                   <div id="yzmd"><img id="veryCode" src="/Ebuy/LoginServlet/yzm2" onclick="changcode()"/></div>
              </div>
              <div id="zhagw"> 
              </div>
              <div id="dran">
                  <button id="dla" type="submit" >登 录</button>
              </div>
          </form>
        </div>
    </div>
</div>
</body>
</html>